<!--
 * @Author: liuyonghu
 * @Date: 2021-12-22 17:34:24
 * @LastEditTime: 2021-12-23 19:34:12
 * @LastEditors: liuyonghu
 * @Description: 
 * @FilePath: /learn-three-js/21-1222/load3d/index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./../../three.js"></script>
    <script src="./../../GLTFLoader.js"></script>
    <script src="../../orbitControls.js"></script>
  </head>
  <body>
    <script>
      function init() {
        // create a scene, that will hold all our elements such as objects, cameras and lights.
        let scene = new THREE.Scene();
        // create a camera, which defines where we're looking at
        let camera = new THREE.PerspectiveCamera(
          75,
          window.innerWidth / window.innerHeight,
          0.1,
          1000
        );
        // tell the camera where to look
        camera.position.set(0, 0, 5);
        // create a render and set the size
        const sizes = {
          width: window.innerWidth,
          height: window.innerHeight,
        };
        let renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(sizes.width, sizes.height);
        renderer.setClearColor('#8cc6ff', 1);

        //点光源
        var point = new THREE.PointLight('#fff');
        point.position.set(200, 100, 100); //点光源位置
        scene.add(point); //点光源添加到场景中

        var point1 = new THREE.PointLight('#fff');
        point1.position.set(-200, -100, -100); //点光源位置
        scene.add(point1); //点光源添加到场景中

        //环境光
        var ambient = new THREE.AmbientLight('#fff');
        scene.add(ambient);

        // add the output of the render function to the HTML
        document.body.appendChild(renderer.domElement);

        var loader = new THREE.GLTFLoader();
// 
        function render() {
          renderer.render(scene, camera);
        }
        loader.load(
          'christmas_2022/scene.gltf',
          function (gltf) {
            // console.log(gltf);
            scene.add(gltf.scene);
            render();
            var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象

            controls.minPolarAngle = 0;
            controls.maxPolarAngle = Math.PI / 2;

            // 注意开发中不要同时使用requestAnimationFrame()或controls.addEventListener('change', render)调用同一个函数，这样会冲突

            // function animate() {
            //   requestAnimationFrame(animate);
            //   render();
            // }
            // animate();

            controls.addEventListener('change', render); //监听鼠标、键盘事件
          },
          undefined,
          function (error) {
            console.error(error);
          }
        );
        // var clock = new THREE.Clock();
        // function for re-rendering/animating the scene
      }
      init();
    </script>
  </body>
</html>
